<template>
  <view class="container">
	<scroll-view scroll-x="true" class="h-tab"  scroll-with-animation="true">
		<view class="tab" :class="tabs.length>4?'y-flex':'y-flex-center'">
		  <view
			class="tab_title"
			:class="{'active':initTabIndex===index}"
			v-for="(item,index) in tabs"
			:key="index"
			@tap="changeTab(index)"
		  >
			<text>{{item.name}}</text>
		  </view>
		</view>
	</scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array
    },
    initTabIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      goods: [],
      pagenum: 1
    };
  },
  methods: {
    changeTab(index) {
      this.$emit("changeTab", index);
    }
  }
};
</script>

<style lang="scss" scoped>
.h-tab {
	white-space: nowrap; //不换行
	width: 100%; //宽度适应屏幕
	height: 88rpx;
	line-height: 88rpx;
	background: #fff;

}
.tab {
  width: 100vw;
  height: 80rpx;
  background-color: #fff;
  .tab_title {
    flex: 1;
    width: 180rpx;
    height: 100%;
    font-size: 36rpx;
  	font-weight: 400;
    color: $text-cbh-gray;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 30rpx;
    &.active {
      font-weight: 500;
  	  font-size: 40rpx;
      color: $text-cbh-title;
  	  text{
  		  border-bottom: 2px solid $color-primary;
  	  }
    }
  }
}

</style>